import React, { useCallback, useState, useEffect } from "react"
import { Navigate, Route, Routes, useNavigate, useLocation } from 'react-router-dom'
import { Row, Col, Menu, Button, Image } from "antd"
import { useSelector, useDispatch } from 'react-redux'


function Nav() {
    const location = useLocation();

    const navigate = useNavigate()
    const changeMenu = useCallback(({ key }) => {
        // e={ item, key, keyPath, domEvent }
        setCurrentPage(key)
        navigate(key)
    })
    const goto = useCallback((path) => {
        navigate(path)
    })

    const dispatch = useDispatch()
    const userInfo = useSelector(function (state) {
        return state.userInfo
    })
    const logout = useCallback(() => {
        // localStorage.removeItem('userInfo')
        dispatch({ type: 'logout' })
    }, [])
    const [currentPage, setCurrentPage] = useState(location.pathname)
    const menu = [

        {
            key: '/shop',
            label: '商场',
        },
        {
            key: '/product',
            label: '产品',
        },
        {
            key: '/project',
            label: '方案',
        },
        {
            key: '/case',
            label: '案例',
        },
        {
            key: '/blogs',
            label: '博客',
        },
        {
            key: '/download',
            label: '下载',
        },
        {
            key: '/school',
            label: '银豹学堂',
        },
    ]

    const buttonsize = {
        fontSize: '20px',
        color: 'black',
        width: '100px',
        height: '100%',
    }
    const style = {
        height: 40,
        width: 40,
        lineHeight: '40px',
        borderRadius: 4,
        backgroundColor: '#1088e9',
        color: '#fff',
        textAlign: 'center',
        fontSize: 14,
    };

    return (
        <div>
            <Row style={{ backgroundColor: '#fff', borderBottom: '1px solid #d4d3cc' }} >
                <Col span={6}>
                    <a href="http://localhost:8080/#/home"><Image src="https://www.pospal.cn/main/resource/image/common/header/navigation/logo.png" preview={false} ></Image></a>
                </Col>
                <Col span={11} style={{ position: 'relative' }} >
                    <Menu

                        mode="horizontal"
                        items={menu}
                        selectedKeys={[currentPage]}
                        onClick={changeMenu}
                        style={{ fontSize: '20px', backgroundColor: '#fff', height: '80px', lineHeight: '80px' }} />

                </Col>
                <Col span={5} offset={2} style={{ lineHeight: '80px' }}>
                    < >
                        {
                            userInfo._id ?
                                <>
                                    <span>{userInfo.username}</span>
                                    <Button type="link" onClick={logout} style={{ backgroundColor: '#ff6727', borderColor: '#ff6727', width: '120px', fontSize: '16px' }}>退出</Button>
                                </>
                                :
                                <>
                                    <Button size='large' type='ghost' onClick={goto.bind(null, '/login')}
                                        style={{ marginRight: '15px', borderColor: '#ff6727', width: '73px', color: '#ff6727' }}
                                    >登录</Button>
                                    <Button size='large' type='primary' onClick={goto.bind(null, '/reg')}
                                        style={{ backgroundColor: '#ff6727', borderColor: '#ff6727', width: '120px', fontSize: '16px' }}
                                    >免费注册</Button>
                                </>
                        }
                    </>
                </Col>
            </Row>

        </div>
    )
}


export default Nav